<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        const obj = {
            name: '张浩Plus',
            age: 20,
            contacts: {
                email: '123121212@qq.com',
                phone: '121212121211'
            }
        };

        // 使用对象的属性值初始化常量
        // const name = obj.name;
        // const age = obj.age;

        // 使用对象解构初始化常量，对象中的属性会自动将值赋值给同名常量，
        // const {name, age, gender} = obj;
        // console.log(name, age); // 张浩Plus 20

        // 使用对象解构初始化非同名常量
        // const {fullName, myAge} = obj;
        // console.log(fullName, myAge);  // undefined undefined

        // 告诉 obj 对象将 name 属性的值赋值给 fullName 常量，将 age 属性的值赋值给 myAge 常量
        // const {name: fullName, age: myAge} = obj;
        // console.log(fullName, myAge);  // 张浩Plus 20
        
        // 为解构设置默认值
        // const {name, age, gender} = obj;
        // // 如果没有同名属性，则常量的值为 undefined
        // console.log(name, age, gender);  // 张浩Plus 20 undefined
        // const {name, age, gender = '男'} = obj;
        // 如果没有同名属性，则使用默认值 '男'
        // console.log(name, age, gender);  // 张浩Plus 20 男
        // const {name: myName, age: myAge, gender: myGender = '男'} = obj;
        // console.log(myName, myAge, myGender);  // 张浩Plus 20 男

        // 为已经存在的变量重新赋值
        // let myName = '杨家乐', myAge = 19;
        // JS 解析引擎不允许赋值操作符的左边出现花括号，
        // 我们可以使用小括号将整个赋值语句包裹起来，这样的话，赋值语句就变成了一个表达式
        // ({name: myName, age: myAge} = obj);
        // console.log(myName, myAge);  // 张浩Plus 20

        // 嵌套对象解构
        // 告诉 obj 对象，将 contacts 对象中的 email 属性的值赋值给常量 email；phone 属性的值赋值给常量 myPhone
        const {contacts: {email, phone: myPhone}}  = obj;
        console.log(email, myPhone)
    </script>
</body>
</html>